* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}
body {
  font-size: 14px;
  color: #003b53;
  font-family: '微软雅黑';
}
a:link,a:visited{
  text-decoration: none;
  font-size: 16px;
}

/* 导航 */
nav {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 60px;
  background: #003b53b4;
  margin: 0 auto;
  color: #f2dca0;
}
/* logo */
nav .left {
  float: left;
  width: 150px;
  height: 60px;
  line-height: 60px;
  font-size: 24px;
  font-weight: 500;
  padding-right: 30px;
}
nav .left p{
  width: 100px;
  height: 95px;
  margin-left: 100px;
  margin-top: -80px;
  color: #f2dca0;
}
nav .left:hover img {
  transform: rotateY(360deg);
  transition: all 1s;
}
nav .left img {
  width: 75%;
  height: 100%;
  margin-left: 15px;
}

/* 导航内容 */
nav .center {
  float: left;
  margin-left: 250px;
  width: 1000px;
  height: 100%;
}
nav .center li {
  /* border: 1px solid black ; */
  position: relative;
  float: left;
  width: 160px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 18px;
  color: #f2dca0;
}
nav .center li:nth-child(6){
  width: 200px;
}
.n3{
  /* border: 1px solid rgb(76, 0, 252) ; */
  height: 60px;
  width: 400px;
  margin-left: 150px;
}
.n3 .h2{
  /* border: 1px solid rgb(252, 0, 0) ; */
  height: 30px;
  width: 30px;
  margin-top: 16px;
  float: left;
}
#search{
  height: 30px;
  width: 200px;
  border-radius: 16px;
  float: left;
  background: transparent;
  border: 1px solid #f2dca0 ;
  margin-top: 16px;
  margin-left: 6px;
  background-image: url(../images/search.png);
  padding-left: 30px;
  background-repeat: no-repeat;
  background-position:3% 50%;
}
nav .center li:hover span {
  width: 100px;
  transition: all 1s;
}
nav .center li span {
  width: 0;
  height: 2px;
  position: absolute;
  bottom: 7px;
  left: 20%;
  background-color: #f2dca0;
}
/* 轮播 */
.rotation {
  width: 1000px;
  height: 500px;
  margin: 0 auto;
}
.rotation img {
  width: 100%;
  height: 100%;
}

/* 时间 */
#nowSpan {
  font-size: 20px;
  color: #003b53;
}
/* 中间内容 */
.content {
  width: 1000px;
  margin: 0 auto;
  text-align: center;
  padding-top: 5px;
}
.content .top {
  padding-top: 15px;
  text-align: center;
  line-height: 30px;
  width: 100%;
  height: 150px;
}
.content .top h1 {
  font-size: 27px;
  font-weight: 500;
  margin-top: 5px;
}
.xia {
  font-size: 10px;
  letter-spacing: 2.5px;
}

/* 中间横文 */
.bottom {
  width: 1000px;
  height: 550px;
  background-color: whitesmoke;
  margin: 0 auto;
  /* border: 2px solid #003b53; */
  overflow: hidden;
}
.bottom .left {
  float: left;
  width: 400px;
  height: 300px;
  margin-left: 10px;
  margin-top: 10px;
  font-size: 16px;
}
.bottom .left p {
  padding: 10px;
  font-size: 15px;
  line-height: 38px;
  text-align: justify;
  text-indent: 2em;
}
 .bottom .right {
  float: left;
  width: 550px;
  height: 330px;
  margin-left: 30px;
  margin-top: 10px;
}
.bottom .right img {
  width: 100%;
  height: 100%;
}

.main {
  width: 1000px;
  height: 550px;
  margin: 0 auto;
   /* border: 1px solid black; */
   overflow: hidden;
   background-color: whitesmoke;
} 
 /* .main .left {
  position: relative;
  float: left;
  width: 550px;
  height: 100%;
}
.main .right { 
  position: relative;
  width: 446px;
  height: 100%;
  box-sizing: border-box;
  padding-top: 30px;
  float: left;
} 
.main .right p {
  padding: 20px;
  margin-top: 70px;
  color: #f2dca0;
  font-size: 15px;
  text-align: left;
  line-height: 30px;
  text-align: justify;
  text-indent: 2em;
  letter-spacing: 3px;
}
.main .left img {
  width: 100%;
  height: 100%;
} */
 /* .cover {
  z-index: 999;
  position: absolute;
  left: 30%;
  top: 6%;
  width: 200px;
  border: 2px solid #f2dca0;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 28px;
  color: #f2dca0;
  background: rgba(0, 0, 0, .3);
  */
.bottom2 {
  width: 1000px;
  height: 550px;
  background-color: whitesmoke;
  margin: 0 auto;
  /* border: 2px solid #003b53; */
  overflow: hidden;
}
.bottom2 .left2 {
  float: left;
  width: 400px;
  height: 300px;
  margin-left: 10px;
  margin-top: 10px;
  font-size: 16px;
}
.bottom2 .left2 p {
  padding: 10px;
  font-size: 15px;
  line-height: 38px;
  text-align: justify;
  text-indent: 2em;
}
 .bottom2 .right2 {
  float: left;
  width: 550px;
  height: 330px;
  margin-left: 30px;
  margin-top: 10px;
}
.bottom2 .right2 img {
  width: 100%;
  height: 100%;
}
.content4{
  width: 1000px;
  height: 500px;
  margin: 0 auto;
  border: 2px solid #003b53;
}
.content4 .right ul{
  /* border: 1px solid rgb(0, 0, 0); */
  margin-top: 20px;
  margin-left: 550px;
  width: 400px;
}
.content4 .right ul li{
  /* border: 1px solid rgb(0, 0, 0); */
  line-height:35px;
}
.content4 .right ul li:nth-child(1){
  text-align: center;
  font-size: 18px;
}
.content4 .right ul a{
  color: #003b53;
}

/* 3D盒子样式 */
.container{
  width: 500px;
  height: 500px;
  /* border: 2px solid #015300; */
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
}
.out-div img{
  width: 200px;
  height: 200px;
  object-fit: cover;
}
/* .in-div img{
  width: 100px;
  height: 100px;
  object-fit: cover;
} */
.box{
  position: absolute;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: rotateAnimate 10s linear infinite;
}
.out-div{
  width: 200px;
  height: 200px;
  position: absolute;
  transition: transform 1s ease-in;
}
.out-front{
  transform: translateZ(100px);
}
.out-back{
  transform: translateZ(-100px) rotateY(180deg);
}
.out-left{
  transform: translateX(-100px) rotateY(-90deg);
}
.out-right{
  transform: translateX(100px) rotateY(90deg);
}
.out-top{
  transform: translateY(-100px) rotateX(90deg);
}
.out-bottom{
  transform: translateY(100px) rotateX(-90deg);
}
/* 定义动画 */
@keyframes rotateAnimate {
  0%{
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100%{
      transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
footer {
  width: 100%;
  margin: 0 auto;
  margin-top:40px;
  height: 80px;
  background-color: #003b53;
}
footer .mains {
  padding-top: 15px;
  margin: 0 auto;
  width: 800px;
  height: 100px;
}
#marquee {
  color: #f2dca0;
  display: block;
  width: 96%;
  height: 30px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#marquee_text {
  position: absolute;
  top: 0;
  left: 100%;
  line-height: 20px;
  display: block;
  word-break: keep-all;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.mains p {
  color: #fff;
  text-align: center;
  font-size: 14px;
}
footer .mains p:hover {
  color: #f2dca0;
} 

.content3{
  width: 1000px;
  height: 320px;
  margin: 0 auto;
  margin-top: 50px;
  /* border: 2px solid #003b53; */
}
.content3 .left {
  float: left;
  width: 500px;
  height: 300px;
  margin-top:10px ;
  margin-left: 18px;
}
.content3 .right ul{
  /* border: 1px solid rgb(0, 0, 0); */
  margin-top: 20px;
  margin-left: 550px;
  width: 400px;
}
.content3 .right ul li{
  /* border: 1px solid rgb(0, 0, 0); */
  border-bottom:1px solid #003b53;
  line-height:40px;
}
.content3 .right ul li:nth-child(1){
  text-align: center;
  font-size: 18px;
}
.content3 .right ul a{
  color: #003b53;
}
.content3 .right ul a:hover{
  color: #f2dca0;
}
.wrapper {
   margin-top: 10px; 
  /* 声明一个容器 */
  display: grid;
  /*  声明列的宽度  */
  grid-template-columns: repeat(4, 220px);
  /*  声明行间距和列间距  */
  grid-gap: 30px;
  /*  声明行的高度  */
  grid-template-rows: 230px 230px;
}
.one {
  border-radius: 5%;
  grid-column: 1/3;
  background-image: url(./img/高一.jpg);
}
.one1 {
  border-radius: 5%;
  grid-column: 1/3;
  background-image: url(./img/高二.jpg);
}
.one2 {
  border-radius: 5%;
  grid-column: 1/3;
  background-image: url(./img/高三.jpg);
}
 .two { 
  border-radius: 5%;
   background: white; 
   
   
} 
.three {
  border-radius: 5%;
  background: white;
}
.four {
  border-radius: 5%;
  background: white;
}
.five {
  border-radius: 5%;
  background:white;
}
.six {
  border-radius: 5%;
  background-color:white;
}
.seven{
  border-radius: 5%;
    background-color: white;
    
}

.item {
   text-align: center; 
  line-height: 100px;
  font-size: 150%;
  font-style: initial;
  color: #003b53;
}
 .one:hover{
  transform: scale(1.1,1.1);
  
}
.two:hover{
  transform: scale(1.1, 1.1);
}
.three:hover{
  transform: scale(1.1, 1.1);
}
.four:hover{
  transform: scale(1.1, 1.1);
}
.five:hover{
  transform: scale(1.1, 1.1);
}
.six:hover{
  transform: scale(1.1, 1.1);
}
.seven:hover{
  transform: scale(1.1, 1.1);
}
/* 铅笔样式 */
.pencil {
  width: 150px; /* control the length of the pencil */
  height: 50px;
  background: 
    linear-gradient(90deg,#e7e7e7 30%,#fe668c 0) 100%/50px 100% no-repeat, 
    conic-gradient(from 55deg at left,#fee7b3,#0000 1deg 69deg,#fee7b3 70deg) 100% 8px/calc(100% - 40px) 16px repeat-y, 
    linear-gradient(#0003 50%,#0000 0) 100% 8px/calc(100% - 41px) 20px repeat-y, 
    linear-gradient(90deg,#2b2026 15px,#fee7b3 16px 40px,#fecc2b 0);
  clip-path: polygon(0 50%,42px 0,100% 0,100% 100%,42px 100%);
  border-radius: 0 10px 10px 0;
  margin: 30px;
}
 /* 网格样式 */
.loader {
  width: 60px;
  height: 50px;
  --m:no-repeat linear-gradient(90deg,#000 70%,#0000 0);
  -webkit-mask: 
    var(--m) calc(0*100%/4) 100%/calc(100%/5) calc(1*100%/5),
    var(--m) calc(1*100%/4) 100%/calc(100%/5) calc(2*100%/5),
    var(--m) calc(2*100%/4) 100%/calc(100%/5) calc(3*100%/5),
    var(--m) calc(3*100%/4) 100%/calc(100%/5) calc(4*100%/5),
    var(--m) calc(4*100%/4) 100%/calc(100%/5) calc(5*100%/5);
  background: linear-gradient(#514b82 0 0) left/0% 100% no-repeat #ddd;
  animation: l14 2s infinite steps(6);
  margin: 95px;
  margin-top: 30px;
}
@keyframes l14 {
  100% {background-size: 120% 100%}
}
.battery {
  --n: 6; /* the number of bar */
  --g: 5px; /* the gap  */
  width: 90px; /* control the size */
  color: #2A363B;
  aspect-ratio: 2;
  border: var(--g) solid;
  padding: var(--g);
  border-radius: 10px;
  background: repeating-linear-gradient(90deg, currentColor 0 calc(100% / var(--n) - var(--g)), #0000 0 calc(100% / var(--n))) 0 0 / calc(100% + var(--g)) content-box;
  position: relative;
  box-sizing: border-box;
  margin: 40px 70px;
}
.battery:before {
  content: "";
  position: absolute;
  inset: 30% -20px 30% 100%;
  background: currentColor;
}
.pacman {
  margin: 20px 30px 0px 70px;
  height: 80px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(6% 6% at 60% 25%,#000 90%,#0000),
    radial-gradient(circle at 35% 35%,#0000,70%,#0005) #fc0;
  clip-path: polygon(0 0,100% 0,100% 25%,50% 50%,100% 75%,100% 100%,0 100%);
}
.wifi-icon {
  --n: 4; /* number of bars */
  margin:  20px 20px 0px 80px;
  height: 80px;
  aspect-ratio: 1;
  border-radius: 50%;
  --s: calc(100%/(2*var(--n) - 1));
  background:
    repeating-radial-gradient(50% 50%,
      #0000 0,#178feb 1px calc(var(--s) - 1px),
      #0000 var(--s) calc(2*var(--s)));
  mask: 
    conic-gradient(#000 0 0) no-repeat 50%/var(--s) var(--s),
    conic-gradient(from -45deg at 50% calc(50% + var(--s)/2),
      #000 90deg,#0000 0);
}
.thunder {
  height: 88px; /* control the size */
  aspect-ratio: 0.56;
  clip-path: polygon(100% 0, 23% 46%, 46% 44%, 15% 69%, 38% 67%, 0 100%, 76% 57%, 53% 58%, 88% 33%, 60% 37%);
  background: #ff8001;
  margin: 20px 88px;
}
.loader1 {
  margin: 30px 30px 0px 85px;
  width: 50px;
  aspect-ratio: 1;
  color:#dc1818;
  background:
   radial-gradient(circle at 60% 65%, currentColor 62%, #0000 65%) top left,
   radial-gradient(circle at 40% 65%, currentColor 62%, #0000 65%) top right,
   linear-gradient(to bottom left, currentColor 42%,#0000 43%) bottom left ,
   linear-gradient(to bottom right,currentColor 42%,#0000 43%) bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  position: relative;
}
.loader2 {
  margin: 20px 80px;
  width: 80px;
  aspect-ratio: 1;
  position:relative;
}
 .loader2:before,
.loader2:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffb940;    
  box-shadow: 0 0 0 50px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.loader3 {
  margin:25px  80px;
  width: 60px;
  aspect-ratio: 1;
  position:relative;
}
.loader3:before,
.loader3:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background:
    radial-gradient(circle 10px,#f85c00 94%,#0000),
    repeating-conic-gradient(from -30deg,#0000 0 60deg,#f85c00 61deg 120deg);
  -webkit-mask:radial-gradient(circle 15px,#000 calc(100% - 6px),#0000 calc(100% - 5px) 94%,#000);
}
.hamburger-menu {
  --c: #556270;
margin: 20px 90px;
  height: 50px;
  aspect-ratio: 1;
  background:
   radial-gradient(closest-side at 12.5% 25%,var(--c) 97%,#0000 101%) 0 0/80% 40%,
   linear-gradient(var(--c) 50%,#0000 0) top/80% 40% repeat-y;
}
.plus {
margin: 20px 80px;
  --b: 50px; /* thickness */
  --s: 35px; /* space around */            
  --c: #abe86f;
  height: 80px;
  aspect-ratio: 1.1;
  border-radius: 40%;
  border: 4px solid var(--c);
  box-sizing: border-box;
  --g:conic-gradient(var(--c) 0 0) no-repeat 50%/;
  background: 
    var(--g) var(--b) calc(100% - 2*var(--s)),
    var(--g) calc(100% - 2*var(--s)) var(--b);
}

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
.ribbon {
  --r: .8em; /* control the cutout */
  margin: 30px 0px 20px 50px;
  padding-right: calc(var(--r) + .25em);
  line-height: 1.8;
  clip-path: polygon(-100vw 0,calc(100% - var(--r)) 0,100% 50%,calc(100% - var(--r)) 100%,-100vw 100%);
  border-image: conic-gradient(#45ada8 0 0) fill 0//100vw;
  width: fit-content;
}
.img{
  width: 300px;
 height: 300px; 
}
